<template>
  <div class="wrap">
    <h1 ref="coding">TypeWriter</h1>
  </div>
</template>

<script>
export default {
  name:'typeCoding',
  mounted() {
    const h1 = this.$refs['coding']
    h1.innerHTML = h1.textContent.replace(/\S/g, "<span>$&</span>");
    let delay = 0;
    document.querySelectorAll("span").forEach((span, index) => {
      delay += 0.1;
      if(index === 4) delay += 0.3
      span.style.setProperty("animation-delay", `${delay}s`);
    });
    // 监听动画完成
    h1.addEventListener('animationend',(e) => {
        if(e.target === document.querySelector('h1 span:last-child')) {
            h1.classList.add('ended')
        }
    })
  },
};
</script>

<style lang="scss">
@import './index.scss';
</style>